<template>
  <div>
    <el-card>
      <el-button style="color: white;background-color: #e15536">调度配置</el-button>
      <el-table :data="listdata">
        <el-table-column label="序号" type="index"/>
        <el-table-column label="运单编号" prop="id"/>
        <el-table-column label="订单编号" prop="orderId"/>
        <el-table-column label="运单状态" prop=""/>
        <el-table-column label="调度状态" prop=""/>
        <el-table-column label="起始营业部" prop="startAgencyName"/>
        <el-table-column label="终点营业部" prop="endAgencyName"/>
        <el-table-column label="当前所在机构" prop="currentAgencyName"/>
        <el-table-column label="下一个机构" prop="nextAgencyName"/>
        <el-table-column label="货品总体积（立方米）" prop="totalVolume"/>
        <el-table-column label="货品总重量（千克）" prop="totalWeight"/>
        <el-table-column label="创建时间" prop="created"/>
        <el-table-column label="更新时间" prop="updated"/>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="route(row.id,row.orderId)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--        页码-->
      <el-pagination
        class="tabletop"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="form.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'as-tab',
  props: {
    listdata: {
      type: Array
    },
    total: {
      type: Number
    }
  },
  data () {
    return {
      form: {
        type: 3,
        page: 1,
        pagesize: 5
      }
    }
  },
  created () {
  },
  methods: {
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.form.pagesize = newSize
      console.log(this.form.pagesize)
    },
    // 监听pagename改变
    handleCurrentChange (newNum) {
      this.form.page = newNum
      console.log(this.form.page)
    },
    route (id, orderId) {
      console.log(id)
      this.$router.push({ path: '/business/waybill-detail', query: { id: id, orderId: orderId } })
    }
  }
}
</script>
